<template>
	<up-navbar
		:leftText="leftText"
		:placeholder="placeholder"
		:autoBack="back"
		:leftIconSize="leftIconSize"
		:bgColor="bgColor"
		@leftClick="leftClick"
		:fixed="true"
		:safeAreaInsetTop="true"
		v-if="isShow"
		:height='height'
	>
		<template #left>
			<slot name="left">
				<view class="">
					<up-icon name="arrow-left" :color="leftIconColor" size="20" v-if="isLeft"></up-icon>
				</view>
				
			</slot>
		</template>

		<template #center>
			<slot name="center">
				<view class="center_title">
					{{ title }}
				</view>
			</slot>
		</template>

		<template #right>
			<slot name="right"></slot>
		</template>
	</up-navbar>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';

// const imgUrl = uni.imgUrl;

const props = defineProps({
	// 标题
	title: {
		type: String,
		default: ''
	},
	// 左侧文字
	leftText: {
		type: String,
		default: ''
	},
	// 生成等高占位
	placeholder: {
		type: Boolean,
		default: true
	},
	// 点击左侧图标是否返回
	autoBack: {
		type: Boolean,
		default: true
	},
	// 左侧字体大小
	leftIconSize: {
		type: [String, Number],
		default: '20px'
	},
	// 左侧图标颜色
	leftIconColor: {
		type: String,
		default: '#fff'
	},
	// 导航栏背景颜色
	bgColor: {
		type: String,
		default: '#19191F'
	},
	// 左侧返回的连接，优先级高于autoBack
	backUrl: {
		type: String,
		default: ''
	},
	// 是否显示导航栏
	isShow: {
		type: Boolean,
		default: true
	},
	// 是否显示左侧
	isLeft:{
		type: Boolean,
		default: true
	},
	// 高度
	height:{
		type: Number,
		default: 55
	},
});

onMounted(() => {});

const back = computed(() => {
	if (props.autoBack && !props.backUrl) {
		return true;
	} else {
		return false;
	}
});

const leftClick = () => {
	if (props.backUrl) {
		uni.switchTab({
			url: props.backUrl
		});
	}
};
</script>

<style lang="scss">
.center_title {
	font-size: 32rpx;
	font-weight: 700;
	line-height: 40rpx;
	color: #fff;
}
</style>
